<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day01开始学习</title>
    <link rel="stylesheet" type="text/css" href="day01Style.css">
    <!-- <style type="text/css"> 
    h1 {color: rgb(122, 12, 233);}
    p {color: aquamarine;}
    a {text-decoration: none;} 
    </style> -->
</head>
<body>  
    <h1>开始学习Html</h1>
    <a href="https://www.runoob.com">跳转到百度</a>
    <hr color="gray"/>

    <h1>春晓</h1> 
    <p>春眠不觉晓， </p>
    <p> 处处闻啼鸟。</p>
    <p>夜来风雨声，</p>
    <p> 花落知多少。</p> 

    <hr/>

    <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">访问百度</a>

    <!-- <a id="tips">有用的提示部分</a>

    <a href="#tips">访问有用的提示部分</a>

    <p>创建图片链接:
        <a href="//www.runoob.com/html/html-tutorial.html">
            <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
        </a>
    </p> -->

    <p>插入一个照片
        <img src="hackanm.gif" alt="" width="48" height="48">
    </p>

    <table border="1" style="color: antiquewhite;">
        <tr>
            <p>水平表单</p>
        </tr>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>

        <tr>
            <td>第一行 第一列</td>
            <td>第一行 第二列</td>
            <td>第一行 第三列</td>
        </tr>
        <tr>
            <td>第二行 第一列</td>
            <td>第二行 第二列</td>
            <td>第二行 第三列</td>
        </tr>
        <tr>
            <td>第三行 第一列</td>
            <td>第三行 第二列</td>
            <td>第三行 第三列</td>
        </tr>

    </table>


    <table border="1" style="color: antiquewhite;">
        <tr>
           <p>垂直表单</p> 
        </tr>
        <tr>
            <th>表头1</th><td>第一行 第一列</td>
        </tr>
        <tr>
            <th>表头2</th><td>第二行 第一列</td>
        </tr>
        <tr>
            <th>表头3</th><td>第三行 第一列</td>
        </tr>
    </table>

    <table border="1" style="color: antiquewhite;">
        <caption>表的标题</caption>
        <tr>
            <th>表头1</th><td>第一行 第一列</td>
        </tr>
        <tr>
            <th>表头2</th><td>第二行 第一列</td>
        </tr>
        <tr>
            <th>表头3</th><td>第三行 第一列</td>
        </tr>
    </table>


    <table border="1" style="color: antiquewhite;">
        <tr>
            <th colspan="3">单元格跨3列表</th>
        </tr>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>

        <tr>
            <td>第一行 第一列</td>
            <td>第一行 第二列</td>
            <td>第一行 第三列</td>
        </tr>
        <tr>
            <td>第二行 第一列</td>
            <td>第二行 第二列</td>
            <td>第二行 第三列</td>
        </tr>
        <tr>
            <td>第三行 第一列</td>
            <td>第三行 第二列</td>
            <td>第三行 第三列</td>
        </tr>

    </table>


    <table border="1" style="color: antiquewhite;">
        <caption>单元格跨2行</caption>
        <tr>
            <th>表头1</th><td>第一行 第一列</td>
        </tr>
        <tr>
            <th rowspan="2">表头2</th><td>第二行 第一列</td>
        </tr>
        <tr>
            <td>第三行 第一列</td>
        </tr>
    </table>


    <table border="1"  style="color: antiquewhite;">
        <caption>有边距的表格</caption>
        <tr>
            <th>表头1</th><td>第一行 第一列</td>
        </tr>
        <tr>
            <th>表头2</th><td>第二行 第一列</td>
        </tr>
        <tr>
            <th>表头3</th><td>第三行 第一列</td>
        </tr>
    </table>

    

        

</body>


</html>
